<template>
    <div id="effect_view" class="effect_view">
        <div class="view_left">
            <div class="left_tab_top">
                <table>
                    <tr>
                        <td colspan="2" @click="initIndexWH()" style="font-size: 24px; font-weight: 800;">2016</td>
                    </tr>
                    <tr v-for="itme in tableo">
                        <td>{{itme.name}}</td>
                        <td>{{itme.value}}</td>
                    </tr>
                </table>
                <table>
                    <tr>
                        <td colspan="2" style="font-size: 24px; font-weight: 800;">2017</td>
                    </tr>
                    <tr v-for="term in tablet">
                        <td>{{term.name}}</td>
                        <td>{{term.value}}</td>
                    </tr>
                </table>
            </div>
            <div class="left_tab_button"></div>
        </div>
        <div class="view_lef_bar" :style="styleHW">
            <div id="effect_left_bar" :style="styleBar"></div>
            <div class="effect_left_bar_message">{{message.condition}}</div>
        </div>
        <div class="view_right_bar" :style="styleHW">
            <div id="effect_right_bar" :style="styleBar"></div>
            <div class="effect_left_bar_message">{{message.roadSafe}}</div>
        </div>
        <div class="view_left_button" :style="styleHW">
            <div id="effect_button_left_bar" :style="styleBar"></div>
            <div class="effect_left_bar_message">{{message.environ}}</div>
        </div>
        <div class="view_right_button" :style="styleHW">
            <div id="effect_button_right_bar" :style="styleBar"></div>
            <div class="effect_left_bar_message">{{message.energy}}</div>
        </div>
    </div>

</template>
<script>
    import * as globals from '../global'
    import env from '../global/env'
    import rid from '../global/rid'
    /*   import EnterTraffic from './EnterTra/!**!/ffic'*/
    import * as configs from '../config'
    import {mapGetters} from 'vuex'


    var echarts = require('echarts');

    export default{
        name: 'EffectMap',
        data(){
            return {
                rlatlon:'',
                tableo:[],
                tablet:[],
                styleBar:{
                    width:'500px',
                    height:'280px',
                },
                styleHW:{
                    width:'535px',
                    height:'310px',
                },
                message:{
                    condition:'',
                    roadSafe:'',
                    environ:'',
                    energy:'',
                }
            }

        },
        components:{


        },
        methods: {
            initEchartsBarData(){
                var that = this;
                console.log('进来了');
                minemap.util.getJSON('./static/json/indexMap/bardata.json', function (error,data) {

                    that.initTableExponent(data);
                    that.initEchartsConditon(data.data.condition);
                    that.initEchartsRoadSafe(data.data.roadSafe);
                    that.initEchartsEnviron(data.data.environ);
                    that.initEchartsEnergy(data.data.energy);
                })
            },
            initTableExponent(data){
                for(var key in data.table[0]){
                    var json = {'name':key,'value':data.table[0][key]};
                    this.tableo.push(json);
                }
                for(var key in data.table[1]){
                    var json = {'name':key,'value':data.table[1][key]};
                    this.tablet.push(json);
                }
            },
            initEchartsConditon(data){
                this.message.condition = data.changeInner;
                var xData = new Array();
                var yData = new Array();
                for(var key in data.year){
                    xData.push(key);
                    yData.push(data.year[key]);
                }

                var offsetWidth = document.body.offsetWidth;
                var widthRt = parseInt(500/1530*offsetWidth);
                var psdding = [15,parseInt(180/500*widthRt)];

                var iChart = echarts.init(document.getElementById('effect_left_bar'));
                iChart.setOption({
                    title:{
                        text:data.title,
                        padding: psdding,
                        textStyle:{
                            color:'#ebebef',
                            fontSize:22,
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b0}<br />速度：{c0}km/h'
                    },
                    grid: {
                        left: '10%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis : {
                        type : 'category',
                        data : xData,
                        axisLabel: {margin: 4,interval:0, textStyle: {color: '#aaa',fontSize:18}},
                        splitLine:{show:true,interval:23,},
                        axisTick:{show:false,},
                    },
                    yAxis : {
                        type : 'value',
                        axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                    },
                    series : [
                        {
                            name:'速度',
                            type:'bar',
                            itemStyle:{
                                normal:{
                                    color:'#3fc429',
                                }
                            },
                            barWidth:'100px',
                            barCategoryGap :'20%',
                            data:yData
                        }
                    ]
                });
            },
            initEchartsRoadSafe(data){
                var offsetWidth = document.body.offsetWidth;
                var widthRt = parseInt(500/1530*offsetWidth);
                var psdding = [15,parseInt(200/500*widthRt)];
                this.message.roadSafe = data.changeInner;
                var xData = new Array();
                var yData = new Array();
                for(var key in data.year){
                    xData.push(key);
                    yData.push(data.year[key]);
                }


                var iChart = echarts.init(document.getElementById('effect_right_bar'));
                iChart.setOption({
                    title:{
                        text:data.title,
                        padding: psdding,
                        textStyle:{
                            color:'#ebebef',
                            fontSize:22,
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b0}<br />事故：{c0}起'
                    },
                    grid: {
                        left: '10%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis : {
                        type : 'category',
                        data : xData,
                        axisLabel: {margin: 4,interval:0, textStyle: {color: '#aaa',fontSize:18}},
                        splitLine:{show:true,interval:23,},
                        axisTick:{show:false,},
                    },
                    yAxis : {
                        type : 'value',
                        axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                    },
                    series : [
                        {
                            name:'事故',
                            type:'bar',
                            itemStyle:{
                                normal:{
                                    color:'#2a9bf0',
                                }
                            },
                            barWidth:'100px',
                            barCategoryGap :'20%',
                            data:yData
                        }
                    ]
                });
            },
            initEchartsEnviron(data){
                this.message.environ = data.changeInner;
                var xData = new Array();
                var yData = new Array();
                for(var key in data.year){
                    xData.push(key);
                    yData.push(data.year[key]);
                }
                var offsetWidth = document.body.offsetWidth;
                var widthRt = parseInt(500/1530*offsetWidth);
                var psdding = [15,parseInt(180/500*widthRt)];

                var iChart = echarts.init(document.getElementById('effect_button_left_bar'));
                iChart.setOption({
                    title:{
                        text:data.title,
                        padding: psdding,
                        textStyle:{
                            color:'#ebebef',
                            fontSize:22,
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b0}<br />指数：{c0}'
                    },
                    grid: {
                        left: '10%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis : {
                        type : 'category',
                        data : xData,
                        axisLabel: {margin: 4,interval:0, textStyle: {color: '#aaa',fontSize:18}},
                        splitLine:{show:true,interval:23,},
                        axisTick:{show:false,},
                    },
                    yAxis : {
                        type : 'value',
                        axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                    },
                    series : [
                        {
                            name:'指数',
                            type:'bar',
                            itemStyle:{
                                normal:{
                                    color:'#fb7701',
                                }
                            },
                            barWidth:'100px',
                            barCategoryGap :'20%',
                            data:yData
                        }
                    ]
                });
            },
            initEchartsEnergy(data){
                this.message.energy = data.changeInner;
                var xData = new Array();
                var yData = new Array();
                for(var key in data.year){
                    xData.push(key);
                    yData.push(data.year[key]);
                }
                var offsetWidth = document.body.offsetWidth;
                var widthRt = parseInt(500/1530*offsetWidth);
                var psdding = [15,parseInt(200/500*widthRt)];

                var iChart = echarts.init(document.getElementById('effect_button_right_bar'));
                iChart.setOption({
                    title:{
                        text:data.title,
                        padding: psdding,
                        textStyle:{
                            color:'#ebebef',
                            fontSize:22,
                        },
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: '{b0}<br />百分点：{c0}'
                    },
                    grid: {
                        left: '10%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis : {
                        type : 'category',
                        data : xData,
                        axisLabel: {margin: 4,interval:0, textStyle: {color: '#aaa',fontSize:18}},
                        splitLine:{show:true,interval:23,},
                        axisTick:{show:false,},
                    },
                    yAxis : {
                        type : 'value',
                        axisLabel: { textStyle: {color: '#ddd',fontSize:11}},
                    },
                    series : [
                        {
                            name:'百分点',
                            type:'bar',
                            itemStyle:{
                                normal:{
                                    color:'#8564e6',
                                }
                            },
                            barWidth:'100px',
                            barCategoryGap :'20%',
                            data:yData
                        }
                    ]
                });
            },
            initIndexWH(){


                var offsetWidth = document.body.offsetWidth;  //1535
                var offsetHeight = document.body.offsetHeight;  //735


                /*根据浏览器窗口加载echarts*/
                var widthRt = parseInt(500/1530*offsetWidth);
                var heightRt = parseInt(280/735*offsetHeight);
                this.styleBar={
                    width:widthRt+'px',
                    height:heightRt+'px'
                }

                var width = parseInt(535/1530*offsetWidth);
                var height = parseInt(310/735*offsetHeight);
                console.log('widht----------'+width+'height-----------'+height);
                this.styleHW={
                    width:width+'px',
                    height:height+'px'
                }

                $('.effect_left_bar_message').css('width',width+'px');


                //左侧表格
                var tabWidth = parseInt(380/1530*offsetWidth);
                var tabHeight = parseInt(640/735*offsetHeight);
                $('.view_left').css('width',tabWidth+'px');
                $('.view_left').css('height',tabHeight+'px');
                $('.view_left table').css('height',parseInt(310/735*offsetHeight)+'px');
                var maringLeft = parseInt(20/1530*offsetWidth);
                var maringTop = parseInt(20/735*offsetHeight);

                $('.view_left').css('margin-left',maringLeft+'px');
                $('.view_left').css('margin-top',maringTop+'px');

                $('.view_lef_bar').css('margin-left',maringLeft+'px');
                $('.view_lef_bar').css('margin-top',maringTop+'px');

                $('.view_right_bar').css('margin-left',maringLeft+'px');
                $('.view_right_bar').css('margin-top',maringTop+'px');

                $('.view_left_button').css('margin-left',maringLeft+'px');
                $('.view_left_button').css('margin-top',maringTop+'px');

                $('.view_right_button').css('margin-left',maringLeft+'px');
                $('.view_right_button').css('margin-top',maringTop+'px');


            }

        },

        mounted(){
            this.initIndexWH();
            this.initEchartsBarData();


        },
        computed: {

        }

    }

</script>
<style scope>
    .effect_view{
        background-color:#031320;
    }
    .view_left{
        width:380px;
        height:640px;
        float:left;
        background-color:#091a30;
        margin-top: 20px;
        margin-left: 20px;

    }
    .view_left table{
        border: 1px solid #696262;
        margin-bottom: 22px;
        width: 380px;
        height: 310px;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
        color:#e4e5e9;
    }
    .view_left table td{
        border: 1px solid #696262;
    }
    .view_lef_bar{
        float:left;
        background-color:#091a30;
        margin-top: 20px;
        margin-left: 20px;
        border: 1px solid #696262;
    }
    .effect_left_bar_message{
        text-align:center;
        width:535px;
        font-size: 18px;
        color: #dde3e9;
    }
    .view_right_bar{
        float:left;
        background-color:#091a30;
        margin-top: 20px;
        margin-left: 20px;
        border: 1px solid #696262;


    }
    .view_left_button{
        float:left;
        background-color:#091a30;
        margin-top: 20px;
        margin-left: 20px;
        border: 1px solid #696262;


    }

    .view_right_button{
        float:left;
        background-color:#091a30;
        margin-top: 20px;
        margin-left: 20px;
        border: 1px solid #696262;

    }

</style>